<template>
	<div class="category">
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><router-link to="/">栏目管理</router-link></el-breadcrumb-item>
			<el-breadcrumb-item>栏目列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 按钮 -->
		<el-button type="success" class="btn" @click="addFn">添加栏目</el-button>
		<!-- 表格 -->
		<el-table
			:data="categoryList"
			border
			stripe
			highlight-current-row
			max-height="700"
			style="width: 50%"
		>
			<el-table-column prop="id" label="ID" sortable min-width="100"></el-table-column>
			<el-table-column prop="name" label="栏目" min-width="100"></el-table-column>
			<el-table-column min-width="200" label="操作">
				<template slot-scope="scope">
					<el-button type="success" plain @click="editFn(scope.row)" class="edit">
						编辑
					</el-button>
					<el-popconfirm
						confirm-button-text="好的"
						@confirm="delFn(scope.row)"
						cancel-button-text="不用了"
						icon="el-icon-info"
						icon-color="red"
						title="确定删除吗？"
					>
						<el-button slot="reference" type="danger" plain>删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { getCategoryAPI, addCategoryAPI } from '@/api/category.js';
export default {
	data() {
		return {
			categoryList: []
		};
	},
	created() {
		this.init()
	},
	methods: {
		async init(){
			this.categoryList = (await getCategoryAPI()).data.data;
			this.categoryList.splice(0, 2);
			// console.log(this.categoryList);
		},
		delFn() {},
		addFn() {
			this.$prompt('请输入栏目名称', '添加栏目', {
				confirmButtonText: '添加',
				cancelButtonText: '取消',
				inputPlaceholder: '请输入栏目名称',
				inputValidator: val => {
					if (val === '') return '不能为空！';
				}
			}).then(async res => {
				// console.log(res.value)
				if (res.value === '') return this.$message.warning('不能为空');
				const {message} = (await addCategoryAPI({ name: res.value })).data;
				// console.log(message)
				if(message !== "栏目添加成功") return this.$message.warning(message);
				this.$message.success(message);
				this.init()
			});
		}
	}
};
</script>

<style scoped lang="less">
.btn {
	margin: 20px 0;
}
.edit {
	margin-right: 10px;
}
</style>
